<template>
  <div>
    <li>
      <div v-if='data.id >0' @click='setparent(data.id)' :class="pid==data.id?'active':''" :id='data.id'>
        {{ data.name }}
      </div>
      <ul v-if='data.son && data.son.length>0'>
        <reply v-for='s in data.son' :key='s.id' :data="s"/>
      </ul>
    </li>

  </div>
</template>
<script>
export default {
  data() {
    return {
      pid: 0
    }
  },
  methods: {
    setparent(id) {
      this.pid = id

      let activelist = document.getElementsByClassName('active')
      for (var i = 0; i < activelist.length; i++) {
        activelist[i].classList.remove('active')
      }

      //首先将当前元素高亮显示
      var mydiv = document.getElementById(id);
      //动态添加高亮类选择器
      mydiv.classList.add("active");
    }
  },
  name: "reply",
  props: ['data']
}
</script>
<style lang="">
.active {
  background-color: chartreuse;
}
</style>